<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<style type="text/css">
			
			.mui-ellipsis{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 0.9em;
			}
			.mui-ellipsis>div{
				width: 50%;
			}
			.fright {
    height: 3.4em;
    background-color: #007AFF;
    text-align: center;
    width: 100%;
    line-height: 3.4em;
    color: white;
}

.pad11{
	padding: 8px 15px;
}
.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    padding: 11px 15px;
			 	text-align: right;
			}
			
.mui-input-row .mui-btn {
			    float: right;
			    width: 60%;
			    padding: 11px 15px;
			}
			.borbot{
				border-bottom: 1px solid #BBBBBB;
			}
			.border-b{
				border-bottom: 1px solid #C7C7C7;
			}
			
			
			.binput{
				border: 1px solid #c7c7c7 !important;
			}
			.mui-input-row label~input{
			    float: right;
			    width: 50%;
			    margin-bottom: 0;
			    padding-left: 0;
			}
			input[type=number]{
				padding: 5px 5px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title" id="headerid">商品入库</h1>
		</header>
		<div class="mui-content">
		   <!-- <div class="main" id="plistid">
				
                	作者：592176224@qq.com
                	时间：2019-02-22
                	描述：
              
				<ul class="mui-table-view">
				    <li class="mui-table-view-cell mui-media">
				        <a href="javascript:;">
				            <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
				            <div class="mui-media-body">
				                幸福            ￥100
				                <div class="mui-ellipsis">
				                	现有库存：10000
				                	<div class="mui-numbox" data-numbox-step="1" data-numbox-min="0" data-numbox-max="100000">
				                	    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
				                	    <input class="mui-input-numbox" type="number" />
				                	    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
				                	</div>
				                	
				                </div>
				            </div>
				        </a>
				    </li>
				</ul>
		    </div>
				  -->
	     	<div class="" >
	     		<div class="mui-input-row borbot" >
		    			<label>入库操作人</label>
			    		<div class="place items" >
						    <button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">默认本人</button>
						</div>
		    	</div>
		    	<div class="mui-input-row borbot">
            	    <label>供货商:</label>
            	    <input type="text" id="supplier" class="textr"  value="" placeholder="请输入供货商">
            	</div>
		    	<div class="mui-input-row borbot">
            	    <label>备注:</label>
            	    <input type="text" id="remark" class="textr"  value="" placeholder="请输入备注">
            	</div>
            	
            	<div class="mui-ellipsis pad11">
                	<div class="mui-input-row">
                	    入库商品列表:
                	</div>
                	<div class="mui-input-row ">
						入库总金额： <span class="red" id="allprice">
							￥ 00.00
						</span>
                	</div>
                </div>
	     		<ul class="mui-table-view" id="plistid">
				</ul>
	     	</div>
		    <div class="footdiv">
		    	<div class="fright" id="subut">
		    		确定
		    	</div>
		    </div>
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var plist = [],
				glist = [],
				dotype = 1,
				product = [],
				mid = 0;
			window.onload = function(){
				mui.init();
				
				try{
					var list = getrequest().list;
					plist = JSON.parse(list);
					dotype = plist.dotype;
					glist = plist.goods;
					setplist(glist);
				}catch(err){
					
				}
				var header = g("headerid");
				
				mui.plusReady(function(res){
					 var view = plus.webview.currentWebview();
					 dotype = view.dotype;
					 glist = view.goods;
					 setplist(glist);
				})
				//设置商品
				
				
				//监听确定
				g("subut").addEventListener("tap",function(res){
					var list = glist;
					for(var i = 0; i < list.length; i++){
						var str = {
							product_id:list[i].pid,
							count:list[i].count,
							price:list[i].buy_price
						}
						product.push(str);
					}
					//console.log(product);
					edit_stock(product);
				})
				
				setaddEventListener();
				get_current_detail();
			}
			
			//获取登陆员工信息
			function get_current_detail(){
				var data = {
					url:"/api/employee/current_detail",
					data:{
						access_token:acctoken(),
					}
				}
				
				ajax(data,function(res){
					console.log("获取员工信息",res);
					g("level").innerHTML = res.data.username;
				})
			}
			
			//修改库存
			function edit_stock(product){
				var data = {
						url:"/api/product/edit_stock",
						data:{
							access_token:acctoken(),
							do_type:dotype,
							product:product,
							employee_id:mid,
							remark:g("remark").value||"",
							supplier:g("supplier").value||"",
						}
					}
					ajax(data,function(res){
						console.log(res);
						mui.toast(res.msg);
						setTimeout(function(res){
							var cPage = plus.webview.currentWebview();
						    var bPage = cPage.opener();
						    bPage.evalJS("onshow();");
							mui.back();
						},0)
					})
				
				
			}
			
			//设置商品
			function setplist(list){
				console.log(list);
				var str = '';
				
				for(var i = 0; i < list.length; i++){
					str += '<li class="mui-table-view-cell mui-media"><a href="javascript:;">'+
				        '<div class="mui-media-body"><div class="mui-ellipsis pad11">'+
				        '<span id="">'+list[i].pname+'</span>'+
				        '<span id="" data-index="'+i+'" class="delclass red">删除</span>'+
				        '</div><div class="mui-ellipsis">'+
				        '<div class="mui-input-row"><label>进货价:</label>'+
				        '<input type="number" id="price'+i+'" data-index="'+i+'" class="changeprice border-b textc binput" value="'+list[i].buy_price+'" placeholder="单价">'+
				        '</div><div class="mui-input-row"><label>数量:</label>'+
				        '<input type="number" id="count'+i+'" data-index="'+i+'" class="changenumber border-b textc binput" value="'+list[i].count+'" placeholder="数量">'+
				        '</div></div>'+
				        '<div class="pad11" id="prices'+i+'">'+
					    '总价：'+(list[i].buy_price * list[i].count)+
					    '</div></div></div></a></li>';
				}
				str += '<div class="footgd"></div>'
				g("plistid").innerHTML = str;
				
				
				getpricenums();
				
				//监听数量
				$(".changenumber").bind("input propertychange",function(e){
					var value = this.value;
					var index = $(this).data("index");
					glist[index].count = value;
					var price = g("price"+index).value;
					g("prices"+index).innerHTML = '总价：'+(price * value);
					getpricenums();
				})
				//监听价格
				$(".changeprice").bind("input propertychange",function(e){
					var value = this.value;
					var index = $(this).data("index");
					glist[index].buy_price = value;
					var count = g("count"+index).value;
					g("prices"+index).innerHTML = '总价：'+(count * value);
					getpricenums();
				})
				
				//监听删除
				$(".delclass").bind("tap",function(e){
					var that = this;
					mui.confirm("是否删除该商品？","",["取消","确认"],function(del){
						if(del.index == 1){
							console.log(e)
							var index = $(that).data("index");
							console.log(index);
							glist.splice(index,1);
							setplist(glist);
							set_opener_glist();
						}
					})
				})
			}
			//设置父类购物车
			function set_opener_glist(){
				try{
			    	var aPage = plus.webview.currentWebview().opener();
			    	//执行父页面函数
			    	aPage.evalJS("setplist('"+JSON.stringify(glist)+"');"); 
			    }catch(e){
			    	
			    }
			}
			
			//计算价格
			function getpricenums(){
				var list = glist;
				var pricenums = 0;
				list.forEach(function(item){
					console.log(list)
					pricenums += (item.buy_price * item.count);
				})
				g("allprice").innerHTML = "￥" + pricenums;
				
			}
			
			function gocomset(rid){
				var list = {rid: rid}
				mui.openWindow({
				    url: 'commission-set.html?rid='+rid, 
				    id: 'commission-set',
				    extras: list,
				 });
			}
			
			//获取员工列表
			function setaddEventListener(){
				var data = {
					url:"/api/employee/lst",
					data:{
						access_token:acctoken()
					}
				}
				ajax(data,function(res){
					console.log("员工列表",res);
					var list1 = [];
					var datalist = res.data.data;
					for(var i = 0;i < datalist.length; i++){
				 		var str = {
				 			value:datalist[i].id,
				 			text:datalist[i].username,
				 		}
						list1.push(str);
					}
					memberlist = list1;
					setpopover(memberlist);
				})
			}
			function setpopover(memberlist){
				var addmemberidPicker = new mui.PopPicker();
				addmemberidPicker.setData(memberlist);
				var level = g("level");
                level.addEventListener('tap', function(event) {
                    addmemberidPicker.show(function(items) {
                    	console.log(items[0])
                        level.innerText = items[0].text;
                        mid = items[0].value;
                        level.datamid = items[0].value;
                    });
                });
			}
		</script>
	</body>

</html>